<template>
  <div class="flex-1">
    <nav class="bg-white mb-5">
      <ul class="flex px-2 sm:px-5 space-x-5 flex-nowrap overflow-x-auto">
        <li
          class="flex-shrink-0 flex cursor-pointer border-b-4 items-center px-2 pb-1.5 pt-2 text-sm sm:text-base text-black-85 border-yellow"
        >
          <img
            src="https://www.lucksec.cn/img/recharge.498c2864.svg"
            alt=""
            class="w-6 sm:w-10 mr-2.5"
          /><span>Recharge record</span>
        </li>
      </ul>
    </nav>
    <main class="p-5 bg-white">
      <!----><!---->
      <div class="relative">
        <div
          class="el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table lk-table"
        >
          <div class="hidden-columns">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <!-- 表格 -->
          <el-table :data="boxOrders" style="width: 100%" v-loading="loading" empty-text="No data">
            <el-table-column prop="out_trade_no" label="Order Number">
            </el-table-column>
            <el-table-column prop="boxfl_name" label="Order Name">
            </el-table-column>
            <el-table-column prop="total_price" label="Total Price"> </el-table-column>
            <el-table-column prop="num" label="Purchase Quantity"></el-table-column>
          </el-table>

          <!--v-if--><!--v-if--><!--v-if--><!--v-if-->
          <div
            class="el-table__column-resize-proxy"
            style="display: none"
          ></div>
        </div>
        <!---->
      </div>
      <!-- <div class="flex justify-center">
        <ul class="Pagination mt-8" data-v-5b86e4a0="">
          <li class="PaginationControl" data-v-5b86e4a0="">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1"
              viewBox="0 0 24 24"
              class="Control w-[18px]"
              data-v-5b86e4a0=""
            >
              <path
                d="M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z"
              ></path>
            </svg>
          </li>
          <li class="PaginationControl" data-v-5b86e4a0="">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1"
              viewBox="0 0 24 24"
              class="Control"
              data-v-5b86e4a0=""
            >
              <path
                d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
              ></path>
            </svg>
          </li>
          <li data-v-637ad14e="" data-v-5b86e4a0="">
            <button
              class="Page Page-active"
              type="button"
              aria-label="Go to page 1"
              data-v-637ad14e=""
              style="background-color: rgb(220, 237, 255)"
            >
              1
            </button>
          </li>
          <li class="PaginationControl" data-v-5b86e4a0="">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1"
              viewBox="0 0 24 24"
              class="Control"
              data-v-5b86e4a0=""
            >
              <path
                d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
              ></path>
            </svg>
          </li>
          <li class="PaginationControl" data-v-5b86e4a0="">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1"
              viewBox="0 0 24 24"
              class="Control"
              data-v-5b86e4a0=""
            >
              <path
                d="M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z"
              ></path>
            </svg>
          </li>
        </ul>
      </div> -->
    </main>
  </div>
</template>
<script>
export default {
  created() {
    this.$api.getBoxOrders().then((res) => {
      this.boxOrders = res.data.data;
      this.loading = false;
    });
  },
  data() {
    return {
      boxOrders: [],
      loading: true,
    };
  },
  methods: {},
};
</script>
<style lang="" scoped></style>
